<template>
	<view>
		<view class="container">
			<view class="top-dro zl-flex zl-row-between">
				<text class="zl-font-26 zl-color-white">如何创作数字分身视频?</text>
				<view class="btn zl-flex zl-row-center" @click="check">
					<text>查看介绍</text>
				</view>
			</view>
			<view class="box_title zl-flex" style="margin-top: 0;">
				<view class="sort">
					<text class="zl_font_number zl-font-24 zl-color-white">1</text>
				</view>
				<text class="zl-m-l-16 zl-font-36 zl-font-bold zl-color-black">选择数字分身模型</text>
			</view>
			<view class="form_box">
				<view class="form_item zl-flex zl-row-between">
					<view class="form_item_left">
						<text class="zl-font-28 zl-font-bold  zl-one-yichu">数字分身模型</text>
					</view>
					<view @click="to_humanList()" class="form_item_right zl-flex zl-row-right">
						<text v-if="form.digitalId > 0" class="zl-font-28 zl-font-500 zl-color-666 zl-one-yichu"> 已设置
						</text>
						<text class="zl-font-28 zl-font-500 zl-color-EB5E00" v-else> 去设置 </text>
						<image class="right_icon zl-m-l-10" src="/static/icon/to_right.png"></image>
					</view>
				</view>
			</view>
			<!-- <view class="people-box ">
				<view @click="choosePeople(item,index)" class="people-item" :class="index===current?'act':''"
					v-for="(item,index) in 3">
					<image style="width: 260rpx;height: 300rpx;" src="/static/clone/wx.png"></image>
					<view class="zl-font-30 zl-color-000 zl-m-t-6 zl-text-center"> 主播华华 </view>
				</view>
			</view> -->
			<view class="box_title zl-flex zl-m-t-70" style="margin-top: 0;">
				<view class="sort">
					<text class="zl_font_number zl-font-24 zl-color-white">2</text>
				</view>
				<text class="zl-m-l-16 zl-font-36 zl-font-bold zl-color-black">选择声音</text>
			</view>
			<view class="form_box">
				<view class="tab-box">
					<view @click="form.voiceType = 1" :class="form.voiceType === 1 ? 'left-big' : 'left-big2'">
						<view :class="form.voiceType === 1 ? 'left-mini' : 'left-mini2'" class="zl-flex zl-row-center">
							<view :class="form.voiceType === 1 ? 'choose-box' : 'normal-box'">
								<view class="zl-color-white zl-font-20" v-show="form.voiceType === 1">
									<image style="width: 18rpx;height: 16rpx;" src="/static/icon/correct.png" mode="">
									</image>
								</view>
							</view>
							<text :class="form.voiceType === 1 ? 'choose-style' : 'normal-style'">我的数字声音</text>
						</view>
					</view>
					<view @click="form.voiceType = 2,form.isPip=false,form.pipList=[]"
						:class="form.voiceType === 1 ? 'right-big' : 'right-big2'">
						<view :class="form.voiceType === 1 ? 'right-mini' : 'right-mini2'"
							class="zl-flex zl-row-center">
							<view :class="form.voiceType === 2 ? 'choose-box' : 'normal-box'">
								<view class="zl-color-white zl-font-20" v-show="form.voiceType === 2">
									<image style="width: 18rpx;height: 16rpx;" src="/static/icon/correct.png" mode="">
									</image>
								</view>
							</view>
							<text :class="form.voiceType === 2 ? 'choose-style' : 'normal-style'">音频驱动</text>
						</view>
					</view>
				</view>
				<view v-show="form.voiceType === 1" class="form_item zl-flex zl-row-between form_item_line">
					<view class="form_item_left">
						<text class="zl-font-28 zl-font-bold  zl-one-yichu">数字分身声音</text>
					</view>
					<view @click="to_viocelist()" class="form_item_right zl-flex zl-row-right">
						<text v-if="form.voiceId > 0" class="zl-font-28 zl-font-500 zl-color-666 zl-one-yichu"> 已设置
						</text>
						<text class="zl-font-28 zl-font-500 zl-color-EB5E00" v-else> 去设置 </text>
						<image class="right_icon zl-m-l-10" src="/static/icon/to_right.png"></image>
					</view>
				</view>
				<view v-show="form.voiceType === 2" class="form_item zl-flex zl-row-between form_item_line">
					<view class="form_item_left">
						<text class="zl-font-28 zl-font-bold  zl-one-yichu">我的音频驱动</text>
					</view>
					<view class="form_item_right zl-flex zl-row-right">
						<view @click="to_wxup()" class="">
							<text v-if="form.voiceMateId > 0" class="zl-font-28 zl-font-500 zl-color-EB5E00"> 已选择
							</text>
							<text v-else class="zl-font-28 zl-font-500 zl-color-EB5E00"> 去设置 </text>
							<image class="right_icon zl-m-l-10" src="/static/icon/to_right.png"></image>
						</view>
					</view>
				</view>
				<view class="form_item zl-flex zl-row-between">
					<view class="form_item_left">
						<text class="zl-font-28 zl-font-bold  zl-one-yichu">人声音量设置</text>
					</view>
					<view class="form_item_right zl-flex zl-row-right">
						<uni-number-box @change="voiceVolumechange" :max="200" :value="form.voiceVolume"
							background="#f5f5f5" color="#000" />
						<text class="zl-font-28 zl-color-666 zl-m-l-10">%</text>
						<!-- <text class="zl-font-28 zl-font-500 zl-color-666" v-else> 系统已为您最佳配置 </text>
						<image class="right_icon zl-m-l-10" src="/static/icon/to_right.png"></image> -->
					</view>
				</view>
				<view class="form_item zl-flex zl-row-between">
					<view class="form_item_left">
						<text class="zl-font-28 zl-font-bold  zl-one-yichu">人声语种</text>
					</view>
					<view class="form_item_right zl-flex zl-row-right">
						<picker mode="selector" @change="bindPickerChange" :value="index" :range="languageList"
							range-key="name">
							<view class="uni-input zl-color-EB5E00">{{ languageList[index].name || '请选择' }}</view>
						</picker>
						<image class="right_icon zl-m-l-10" src="/static/icon/to_right.png"></image>
					</view>
				</view>
			</view>
			<view v-show="form.voiceType === 1" class="box_title zl-flex zl-m-t-70 zl-row-between"
				style="margin-top: 0;">
				<view class="zl-flex">
					<view class="sort">
						<text class="zl_font_number zl-font-24 zl-color-white">3</text>
					</view>
					<text class="zl-m-l-16 zl-font-36 zl-font-bold zl-color-black">视频口播文案</text>
				</view>
				<view @click="openAI()" class="AI-btn zl-flex zl-row-center">
					<image style="width: 28rpx;margin-right: 12rpx;" src="/static/clone/AI.png" mode="widthFix"></image>
					AI帮写
				</view>
			</view>
			<view v-show="form.voiceType === 1" class="form_box" style="padding-bottom: 20rpx;">
				<textarea @click="$refs.popup4.open()" style="width: 630rpx;height: 400rpx;padding: 30rpx 0;"
					v-model="form.content" :disabled="true" placeholder="请输入文字" :border="false" :clearable="false"
					placeholderStyle="color:#999;fontSize:28rpx" :cursor-spacing="160" :maxlength="500" />
				<view class="zl-flex zl-row-right zl-m-r-20">
					<view class="langBtn" @click="checktext">
						识别语种
					</view>
				</view>
			</view>
               <!-- 画中画 -->
               <view class="form_box" v-if="form.voiceType===1">
				<view class="form_item  zl-flex zl-row-between form_item_line">
					<view class="form_item_left">
						<text class="zl-font-28 zl-font-bold zl-color-333 zl-one-yichu">画中画显示</text>
					</view>
					<view class="form_item_right zl-flex zl-row-right">
						<switch style="transform:scale(0.7)" color="#5AC259" @change="isPipChange"
							:checked="form.isPip"></switch>
					</view>
				</view>
				<view  class="form_item zl-flex zl-row-between" v-show="form.isPip">
					<view class="form_item_left">
						<text class="zl-font-28 zl-font-bold  zl-one-yichu">画中画样式</text>
					</view>
					<view @click="toPicList()" class="form_item_right zl-flex zl-row-right">
						<text class="zl-font-28 zl-font-500 zl-color-666 zl-one-yichu" v-if="form.pipList.length>0"> 已设置{{form.pipList.length}}种样式
						</text>
                        <text class="zl-font-28 zl-font-500 zl-color-666 zl-one-yichu" v-else> 去设置
						</text>
						<image class="right_icon zl-m-l-10" src="/static/icon/to_right.png"></image>
					</view>
				</view>
			</view>
             <!-- 画中画 -->
			<view class="box_title zl-flex" style="margin-top: 50rpx;">
				<view class="sort">
					<text class="zl_font_number zl-font-24 zl-color-white">{{ form.voiceType === 2 ? 3 : 4 }}</text>
				</view>
				<text class="zl-m-l-16 zl-font-36 zl-font-bold zl-color-black">视频标题文案</text>
			</view>
			<view class="form_box">
				<view class="form_item  zl-flex zl-row-between form_item_line">
					<view class="form_item_left">
						<text class="zl-font-28 zl-font-bold zl-color-333 zl-one-yichu">视频标题显示</text>
					</view>
					<view class="form_item_right zl-flex zl-row-right">
						<switch style="transform:scale(0.7)" color="#5AC259" @change="isTitleChange"
							:checked="form.isTitle">
						</switch>
					</view>
				</view>
				<view v-show="form.isTitle" class="form_item zl-flex zl-row-between">
					<view class="form_item_left">
						<text class="zl-font-28 zl-font-bold  zl-one-yichu">视频标题文案</text>
					</view>
					<view @click="to_titleList()" class="form_item_right zl-flex zl-row-right">
						<text class="zl-font-28 zl-font-500 zl-color-666 zl-one-yichu"> 已设置{{ form.titles.length }}条文案
						</text>
						<!-- <text class="zl-font-28 zl-font-500 zl-color-color" v-else> 已为您最佳设置 </text> -->
						<image class="right_icon zl-m-l-10" src="/static/icon/to_right.png"></image>
					</view>
				</view> 
			</view>
			<view class="box_title zl-flex" style="margin-top: 50rpx;">
				<view class="sort">
					<text class="zl_font_number zl-font-24 zl-color-white">{{ form.voiceType === 2 ? 4 : 5 }}</text>
				</view>
				<text class="zl-m-l-16 zl-font-36 zl-font-bold zl-color-black">视频字幕</text>
			</view>
			<view class="form_box">
				<view class="form_item  zl-flex zl-row-between form_item_line">
					<view class="form_item_left">
						<text class="zl-font-28 zl-font-bold zl-color-333 zl-one-yichu">是否需要字幕</text>
					</view>
					<view class="form_item_right zl-flex zl-row-right">
						<switch style="transform:scale(0.7)" color="#5AC259" @change="isCaptionsChange"
							:checked="form.isCaptions">
						</switch>
					</view>
				</view>
				<view v-show="form.isCaptions" class="form_item zl-flex zl-row-between">
					<view class="form_item_left">
						<text class="zl-font-28 zl-font-bold  zl-one-yichu">字幕样式</text>
					</view>
					<view @click="to_textStyle()" class="form_item_right zl-flex zl-row-right">
						<text class="zl-font-28 zl-font-500 zl-color-666"> 已设置字幕样式 </text>
						<image class="right_icon zl-m-l-10" src="/static/icon/to_right.png"></image>
					</view>
				</view>
			</view>
			<view class="box_title zl-flex" style="margin-top: 50rpx;">
				<view class="sort">
					<text class="zl_font_number zl-font-24 zl-color-white">{{ form.voiceType === 2 ? 5 : 6 }}</text>
				</view>
				<text class="zl-m-l-16 zl-font-36 zl-font-bold zl-color-black">选择背景音乐</text>
			</view>
			<view class="form_box">
				<view class="form_item  zl-flex zl-row-between form_item_line">
					<view class="form_item_left">
						<text class="zl-font-28 zl-font-bold zl-color-333 zl-one-yichu">是否需要背景音乐</text>
					</view>
					<view class="form_item_right zl-flex zl-row-right">
						<switch style="transform:scale(0.7)" color="#5AC259" @change="isMusicChange"
							:checked="form.isMusic">
						</switch>
					</view>
				</view>

			</view>
			<view v-show="form.isMusic" class="form_box">
				<view class="tab-box">
					<view @click="form.isSystemMusic = true" :class="form.isSystemMusic ? 'left-big' : 'left-big2'">
						<view :class="form.isSystemMusic ? 'left-mini' : 'left-mini2'" class="zl-flex zl-row-center">
							<view :class="form.isSystemMusic ? 'choose-box' : 'normal-box'">
								<view class="zl-color-white zl-font-20" v-show="form.isSystemMusic">
									<image style="width: 18rpx;height: 16rpx;" src="/static/icon/correct.png" mode="">
									</image>
								</view>
							</view>
							<text :class="form.isSystemMusic ? 'choose-style' : 'normal-style'">系统背景音乐</text>
						</view>
					</view>
					<view @click="form.isSystemMusic = false" :class="form.isSystemMusic ? 'right-big' : 'right-big2'">
						<view :class="form.isSystemMusic ? 'right-mini' : 'right-mini2'" class="zl-flex zl-row-center">
							<view :class="!form.isSystemMusic ? 'choose-box' : 'normal-box'">
								<view class="zl-color-white zl-font-20" v-show="!form.isSystemMusic">
									<image style="width: 18rpx;height: 16rpx;" src="/static/icon/correct.png" mode="">
									</image>
								</view>
							</view>
							<text :class="!form.isSystemMusic ? 'choose-style' : 'normal-style'">自定义背景音乐</text>
						</view>
					</view>
				</view>
				<view v-show="!form.isSystemMusic" class="form_item zl-flex zl-row-between">
					<view class="form_item_left">
						<text class="zl-font-28 zl-font-bold  zl-one-yichu">我的背景音乐</text>
					</view>
					<view @click="to_myMusic()" class="form_item_right zl-flex zl-row-right">
						<view class="" v-if="form.voiceMateId > 0">
							<text class="zl-font-28 zl-font-500 zl-color-EB5E00 zl-one-yichu"> 已完成设置 </text>
							<image class="right_icon zl-m-l-10" src="/static/icon/to_right.png"></image>
						</view>
						<view class="" v-else>
							<text class="zl-font-28 zl-font-500 zl-color-EB5E00"> 去设置 </text>
							<image class="right_icon zl-m-l-10" src="/static/icon/to_right.png"></image>
						</view>
					</view>
				</view>
				<view v-show="form.isSystemMusic" class="form_item zl-flex zl-row-between">
					<view class="form_item_left">
						<text class="zl-font-28 zl-font-bold  zl-one-yichu">系统背景音乐</text>
					</view>
					<view @click="to_musicList()" class="form_item_right zl-flex zl-row-right">
						<text v-if="form.musicMateId > 0" class="zl-font-28 zl-font-500 zl-color-666 zl-one-yichu"> 已设置
						</text>
						<text class="zl-font-28 zl-font-500 zl-color-666" v-else> 系统已为您最佳配置 </text>
						<image class="right_icon zl-m-l-10" src="/static/icon/to_right.png"></image>
					</view>
				</view>
				<view class="form_item zl-flex zl-row-between">
					<view class="form_item_left">
						<text class="zl-font-28 zl-font-bold  zl-one-yichu">背景音量设置</text>
					</view>
					<view class="form_item_right zl-flex zl-row-right">
						<uni-number-box @change="musicVolumechange" :max="200" :value="form.musicVolume"
							background="#f5f5f5" color="#000" />
						<text class="zl-font-28 zl-color-666 zl-m-l-10">%</text>
						<!-- <text class="zl-font-28 zl-font-500 zl-color-666" v-else> 系统已为您最佳配置 </text>
						<image class="right_icon zl-m-l-10" src="/static/icon/to_right.png"></image> -->
					</view>
				</view>
			</view>
			<!-- <view class="box_title zl-flex" style="margin-top: 0;">
				<view class="sort">
					<text class="zl_font_number zl-font-24 zl-color-white">4</text>
				</view>
				<text class="zl-m-l-16 zl-font-36 zl-font-bold zl-color-black">给视频起个名字</text>
			</view>
			<view class="form_box">
				<view class="form_item form_item_line zl-flex zl-row-between">
					<view class="form_item_right zl-flex zl-row-right">
						<input style="width: 100%;" v-model="form.name" placeholder="请输入文字" :border="false" type="text"
							:clearable="false" placeholderStyle="color:#999;fontSize:28rpx" :cursor-spacing="80"
							:maxlength="20" />
					</view>
				</view>
			</view> -->
		</view>
		<view class="footer zl-flex zl-row-center">
			<view class="btn zl-theme-btn" @click="create()"> 生成数字分身视频 </view>
		</view>
		<uni-popup :animation="false" ref="popup4" type="bottom" background-color="#fff"
			border-radius="20rpx 20rpx 20rpx 20rpx" :is-mask-click="false">
			<view class="" style="height: calc(100vh - 100rpx);">
				<view class="zl-p-t-26 zl-p-l-26 zl-font-34 zl-font-500">
					视频口播文案
				</view>
				<view style="height: calc(100% - 200rpx);width: 690rpx;margin: 0 auto;">
					<textarea
						style="margin: 30rpx 0;height: 100%;width: 100%;border: 2rpx solid #eee;border-radius: 8rpx;padding:26rpx;box-sizing: border-box;"
						v-model="form.content" placeholder="请输入文字" placeholderStyle="color:#999;fontSize:28rpx;"
						:cursor-spacing="80" :maxlength="2000" />
				</view>
				<view class="zl-flex zl-row-between">
					<view class="btn99 zl-m-t-32 cancelBtn1" @click="$refs.popup4.close()"> 取 消 </view>
					<view class="btn99 zl-m-t-32 sure-btn" @click="$refs.popup4.close()"> 确 认 </view>
				</view>
				<view class="safe-area-inset-bottom">
				</view>
			</view>
		</uni-popup>
		<uni-popup :animation="false" ref="popup" type="center" background-color="#fff"
			border-radius="20rpx 20rpx 20rpx 20rpx" :is-mask-click="false">
			<view class="tip-box zl-flex-col zl-col-center">
				<!-- <view class="zl-color-000 zl-font-40 zl-font-600 zl-m-t-50"> </view> -->
				<view class="zl-color-666 zl-font-24 zl-m-t-30 zl-text-center">系统会根据系统最终生成视频时长扣除相应分钟数，请知晓！ </view>
				<view class="btn zl-m-t-32 sure-btn" @click="sure()"> 确认生成 </view>
				<view class="btn zl-m-t-32 cancelbtn" @click="cancel()"> 再想想 </view>
			</view>
		</uni-popup>
		<uni-popup :animation="false" ref="popup2" type="center" background-color="#fff"
			border-radius="20rpx 20rpx 20rpx 20rpx" :is-mask-click="false">
			<view class="tip-box zl-flex-col zl-col-center">
				<view class="zl-color-000 zl-font-40 zl-font-600 zl-m-t-50"> 正在生成视频中… </view>
				<view class="zl-color-666 zl-font-24 zl-m-t-30"> 大约需耗时<text
						style="color: #EB5E00;">3分钟</text>完成视频合成，您可稍后在【我的作品】模块中，查看进度。 </view>
				<view class="btn zl-m-t-32 cancelbtn" @click="to_mywork()"> 前往查看 </view>
			</view>
		</uni-popup>
		<!-- <uni-popup :animation="false" ref="popup3" type="center" background-color="#fff"
			border-radius="20rpx 20rpx 20rpx 20rpx" :is-mask-click="false">
			<view class="tip-box zl-flex-col zl-col-center">
				<view class="zl-color-000 zl-font-40 zl-font-600 "> 使用者承诺须知</view>
				<view class="zl-color-666 zl-font-24 zl-m-t-30">
					本声明将帮助您更好的在【AI数字分身】平台(下称“本平台”)使用相关工具上传和管理您的作品。您若上传作品即视为您以充分知悉并充分接受以下内容
					您作为使用者在本平台上传、发布的作品，应具有独立、完整的知识产权，不得侵犯他人知识产权等任何权利。您在使用本平台及上传、发布作品时，应当自觉遵守国家法律、法规，遵守公共秩序，尊重社会公德、社会主义制度、国家利益、公民合法权益、道德风尚和信息真实性等要求。如有违反，一经本平台发现将根据违规程度采取包括但不限于删除、下架、禁止发布内容、封禁账号等处理方式。如造成恶劣影响或涉嫌违法犯罪的，本平台将有权向有关管理机关或公安机关提交相关内容，并配合进行调查。
					若您上传的作品及作品中的素材(包括但不限于创意、文本、肖像、音频、图片、视频等)侵犯了任何第三方权利,本平台均有权在收到相关侵权投诉后对该被投诉的作品或用户账号依据相应规则，采取包括但不限于下架、警告、封禁账号等处理方式。
				</view>
				<view class="btn zl-m-t-42 zl-theme-btn" @click="agree()"> 我已知晓并同意 </view>
			</view>
		</uni-popup> -->
		<uni-popup :animation="false" ref="popup3" type="center" background-color="#fff"
			border-radius="20rpx 20rpx 20rpx 20rpx" :is-mask-click="false">
			<view class="tip-box zl-flex-col zl-col-center">
				<view class="zl-color-000 zl-font-34 zl-font-bold zl-width-100 zl-text-center"
					style="position: relative;">
					使用者协议 <image @click="closePop()"
						style="width: 30rpx;height: 30rpx;position: absolute;right: -20rpx;top: 8rpx;"
						src="/static/icon/pop_close.png" mode=""></image>
				</view>
				<view class="zl-color-000 zl-font-26 zl-m-t-30 scroll-box">
					<text class="zl-font-bold ">本人在此授权并承诺:</text></br> 1、<text
						class="zl-font-bold underlined">本人向当前登录平台(以下称“本平台”)提供</text>
					<text>(包括但不限于通过线上上传、线下等方式提供)</text><text
						class="zl-font-bold">的数据</text>(包括但不限于文字、图片、视频、音频等各种形式的内容，以及其中包含的姓名、电话号码、身份证号码、脸型、五官、身体部位、人物动作、服饰妆容、声音、文字、台词、音乐、音频、视觉设计等所有组成部分，以下统称为“数据”)的<text
						class="zl-font-bold underlined">唯一权利人为本人或本人已取得全体权利人</text>(包括但不限于著作权人等知识产权人、肖像权人、声音权人、个人信息权人、所有权人等)的合法完整授权(包括但不限于:生物识别信息编辑权、复制权、翻译权、汇编权、信息网络传播权、改编权及制作衍生品、表演和展示的权利等)(本平台有权视情况要求本人提供相关授权文件);
					</br>2、无论数据来源于本人还是第三方， <text class="zl-font-bold underlined">数据所涉及的全体权利人均同意本人使用账号</text>
					(即本人注册本平台使用的手机号) <text
						class="zl-font-bold underlined">将数据用于声音制作、包含权利人肖像、声音等的视频模板(以下简称“视频模板”)制作及其衍生作品的制作、发布。
					</text>
					<text class="zl-font-bold underlined">数据授权可能产生的商业价值分配纠纷或其他潜在的纠纷皆为本人与数据所涉权利人之间的问题，均由本人自行处理，与本平台无关。
					</text></br>
					<text class="zl-font-bold underlined">3、数据所涉及的全体权利人均已知悉并同意本平台提供的针对视频模板涉及个人数据的处理能力，包括:</text></br>
					<view class="zl-font-bold underlined">(1)姓名、电话号码、身份证号码，用于本人账号的实名认证。</br>
						(2)训练视频中的脸型、五官、身体部位、人物动作、服饰妆容，用于定制视频模板形象。</br> (3)训练音频，用于定制视频模板声音。</br>
						</br> 4、本人保证向本平台提供的数据均真实合法合规有效、不违背公序良俗且不侵犯任何人的合法权益(包括但不限于著作权等知识产权、个人隐私权、个人信息权、肖像权、声音权等)。
						</br>5、本人通过本平台从事或拟从事的行为属于合法合规正当的行为。本人不会利用本平台实施任何违反中华人民共和国法律法规政策、危害国家安全和利益、损害国家形象、侵害社会公共利益、扰乱经济和社会秩序、违反本平台规则(包括但不限于:用户协议、隐私政策)、违反公序良俗或侵害他人合法权益的行为，包括但不限于:隐瞒制作的内容为深度合成的情况;利用本平台制作、复制、发布、传播虚假内容、黄赌毒等违法违规内容、侵犯他人的合法权益的内容、歪曲或篡改原作者(或原人物，原权利人)思想或原作者(或原人物，原权利人)的意思表示的内容、降低原作者(或原人物，原权和人)社会评价的内容。</br>6、本人不得对素材、模板以及输出内容中的人物肖像(如有)以冒犯、侵权、违法等任何不当方式使用，不当方式包括但不限于:</br>(1)在色情图像或类似情形中使用;
						</br>(2)用于暗示人物参与不道德或非法行为; </br>(3)用于暗示人物遭受身体或精神衰弱、疾病等状况: </br>(4)用于政治性代言的行为;
						</br>(5)用于产品或服务代言的行为; </br>(6)导致人物社会评价降低的行为; </br>(7)其他可能对人物有冒犯或贬低的行为。
						</br>7、本平台有权对本人制作(或发布)的内容进行审核，但对本人制作(或发布)的任何内容均不承担任何明示或默示的保证，均不代表本平台观点或意见。</view>
					本平台有权根据相关证据结合《民法典》《信息网络传播权保护条例》等法律法规及本条款的规定对侵权信息或违法违规信息进行处理。 <view class="zl-font-bold underlined">
						</br>8、本人应自行对其提供的数据、利用本平台所从事的活动、通过本平台进行的活动、或利用制作内容所进行的活动所引起的一切后果承担全部责任，本平台的所有者、运营方及关联方对此不承担任何责任。</br>9、在任何情况下，本平台、本平台的所有者、运营方及关联方均不对任何间接性、后果性、惩戒性、偶然性、特殊性的损害，包括本人使用本平台服务而遭受的利润损失承担责任(即使本平台、本平台的所有者、运营方及关联方已被告知该等损失的可能性)</br>10、本平台有权在本人制作内容的合理位置、区域进行显著标识，提示深度合成情况，本人不得采用技术手段删除、篡改、隐匿深度合成标识。</br>11、本人违反上述条款的，本平台有权立即停止相关服务、删除相关数据(如:制作的结果)、终止服务或采取其他合理措施减少损失，并有权追究本人的违约责任等法律责任，也无需向本人退还支付的任何费用，并有权要求本人赔偿所有损失(包括但不限于直接损失、间接损失、商誉损害、律师费用、诉讼费、保全费、保全担保费、鉴定费、调查费、公证费和其他法律开支等一切维护权益的费用及本平台因此向第三方承担的赔偿款、和解/调解费等全部费用)。
						本人违反上述条款的，本平台还有权根据司法部门或监管部门的要求，向其提供本人在本平台注册的个人信息(姓名、电话号码、身份证号码)及向本平台提交/利用本平台生成的全部数据。
						</br>12、本人系具有完全民事行为能力的年满18周岁的成年人，完全理解上述条款的含义并同意遵守上述条款。</view>
				</view>
				<view class="btn zl-m-t-42 zl-theme-btn" @click="agree()"> 我已知晓并同意 </view>
			</view>
		</uni-popup>
		<uni-popup :animation="false" ref="popup6" type="center" background-color="#fff"
			border-radius="20rpx 20rpx 20rpx 20rpx" :is-mask-click="false">
			<view class="tip-box zl-flex-col zl-col-center">
				<!-- <view class="zl-color-000 zl-font-40 zl-font-600 zl-m-t-50"> </view> -->
				<view class="zl-color-000 zl-font-32 zl-m-t-30 zl-text-center" v-if="isCheck">
					当前识别的语种为
					<text style="color: #EB5E00;">{{ languageName }}</text>,是否切换！
				</view>
				<view class="zl-color-666 zl-font-26 zl-m-t-30 zl-text-center">
					{{ errmsg }}
				</view>
				<view class="btn zl-m-t-52 cancelbtn" @click="cancelCheck()"> 取消</view>
				<view class="btn zl-m-t-32  sure-btn" v-if="isCheck" @click="sureCheck()"> 确认切换 </view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				oemName: getApp().globalData.oemName,

				current: 0,
				current2: 0,
				coverUrl: "",
				form: {
					isTitle: false,
					voiceType: 1,
					voiceId: 0,
					content: '',
					voiceMateId: 0,
					digitalId: 0,
					musicMateId: 0,
					voiceVolume: 95,
					musicVolume: 5,
					isMusic: false,
					isSystemMusic: true,
					isCaptions: false,
					language: '',
					titles: [{
						fontSize: 46,
						color: '#000000',
						outlineColor: '',
						outline: 0,
						bord: 16,
						radius: 16,
						bordColor: '#FFDE00',
						isAlignCenter: true,
						x: 0,
						y: 8,
						fontId: 0,
						title: '请编辑您的标题',
						isTiming: false,
						time: 2
					}],
					"captions": {
						fontSize: 40,
						color: '#FFDE00',
						outlineColor: '#000000',
						outline: 4,
						bord: 0,
						radius: 0,
						bordColor: '#000000',
						isAlignCenter: true,
						x: 0,
						y: 70,
						fontId: 0,
					},
                    pipList:[],
                    isPip: false,

				},
				wxfile: {
					name: "1730081539712_051e5bh5.mp3",
					url: "https://oop-zl-szr.oss-cn-hangzhou.aliyuncs.com/voice/3689888651026437/d088a82d1e964935911b8cfd538a342d.mp3",
					userFileId: 3771619106562053,
					userId: 3689888651026437,
				},
				innerAudioContext: null,
				playIng: false,
				languageList: [],
				index: null,
				isCheck: false,
				errmsg: '',
				languageName: '',
				langObj: {},
				config: {},
				appid: getApp().globalData.appid,

			};
		},
		onLoad() {
			uni.request({
				url: 'https://szrjch5.zhim123.com/audit.json?time=' + new Date().getTime(),
				success: (res) => {
					if (res.statusCode === 200) {
						console.log(res.data);
						this.config = res.data[this.appid]
					}
				}
			})
			uni.$on('choosevoiceModelId', res => {
				if (res) {
					this.form.voiceId = res;
				}
			});
			uni.$on('choosevoiceMateId', res => {
				if (res) {
					this.form.voiceMateId = res;
				}
			});
			uni.$on('choosedigitalModelId', res => {
				console.log(res);
				if (res) {
                    getApp().globalData.temp_coverUrl = res.coverUrl;
					this.form.digitalId = res.digitalId;
					this.coverUrl = res.coverUrl;
				}
			});
			uni.$on('choosemusicId', res => {
				if (res) {
					this.form.musicMateId = res;
				}
			});
			uni.$on('useAI', res => {
				if (res) {
					this.form.content = res;
				}
			})
			uni.$on('titleStyle', res => {
				if (res) {
					this.form.titles = res;
				}
			})
			uni.$on('textStyle', res => {
				if (res) {
					this.form.captions = res;
				}
			})
            uni.$on('choosePipList', res => {
                if (res) {
                    console.log(res,'pipList');
                    getApp().globalData.pipList = res;
                    
                    this.form.pipList = res;
                }
            });
			this.$refs.popup3.open();
			this.getLanguageList()

		},
		onUnload() {
			uni.$off('choosevoiceModelId');
			uni.$off('choosevoiceMateId');
			uni.$off('choosedigitalModelId');
			uni.$off('choosemusicId');
			uni.$off('useAI');
			uni.$off('titleStyle');
			uni.$off('textStyle');
            uni.$off('choosePipList');
		},
		methods: {
              // 去选择画中画
              toPicList() {
                if (this.form.digitalId <= 0) {
					return this.$util.msg('请先配置数字人模型！')
				}
                if (!this.form.content) {
					return this.$util.msg('请先创作视频口播文案，再进行画中画配置！')
				}
                getApp().globalData.content = this.form.content;
                uni.navigateTo({
                    url: '/pages/create/picContentSet' 
                })
            },
			// 获取语种
			getLanguageList() {
				this.api.language.languagelist().then(res => {
					if (res.code === 0) {
						this.languageList = res.data
					} else {
						this.$util.msg(res.msg);
					}
				}).catch(err => {
					this.$util.msg('请检查网络连接！');
				})
			},
			cancelCheck() {
				this.errmsg = ''
				this.isCheck = false
				this.$refs.popup6.close()
			},
			sureCheck() {
				this.language = this.langObj.language
				this.index = this.languageList.findIndex(item => item.language === this.language)
				this.form.language = this.languageList[this.index].language
				this.errmsg = ''
				this.isCheck = false
				this.$refs.popup6.close()
			},
			checktext() {
				if (!this.form.content) {
					this.$util.msg('请输入文案！')
					return
				}
				this.api.language.checktext({
					content: this.form.content
				}).then(res => {
					if (res.code === 0) {
						this.isCheck = true
						this.langObj = res.data
						this.languageName = res.data.name
						this.$refs.popup6.open()
					} else {
						this.isCheck = false
						this.errmsg = res.msg
						this.$refs.popup6.open()
					}
				}).catch(err => {
					this.$util.msg('请检查网络连接！');
				})
			},
			bindPickerChange(e) {
				console.log(e);
				this.index = parseInt(e.detail.value);
				this.form.language = this.languageList[this.index].language
			},
			choosePeople(item, index) {
				this.current = index
			},
			create() {
                  // 将pipList数组处理一下，仅需要pipId 和 cursor
                  if(this.form.pipList.length > 0) {
                    this.form.pipList = this.form.pipList.map(item => {
                        return {
                            pipId: item.pipId,
                            cursor: item.cursor
                        }
                    })
                }
				console.log(this.form);
				if (!this.form.digitalId) {
					this.$refs.popup.close();
					return this.$util.msg('请选择数字分身模型!')
				}
				if (this.form.voiceType === 1) {
					if (!this.form.voiceId) {
						this.$refs.popup.close();
						return this.$util.msg('请选择人声模型!')
					}
					if (!this.form.content) {
						this.$refs.popup.close();
						return this.$util.msg('请输入文案!')
					}
				}
				if (this.form.voiceType === 2) {
					if (!this.form.voiceMateId) {
						this.$refs.popup.close();
						return this.$util.msg('请选择音频驱动!')
					}
				}
				if (this.form.isTitle) {
					if (this.form.titles.some(item => item.title === "请编辑您的标题")) {
						return this.$util.msg('请编辑您的标题!');
					}
				}
				this.$refs.popup.open()
			},
			to_wxup() {
				uni.navigateTo({
					url: '/pages/create/upaudio?voiceMateId=' + this.form.voiceMateId
				})
			},
			cancel() {
				this.$refs.popup.close()
			},
			sure() {
				this.$refs.popup.close()
				this.api.clip.submitdigitaltask(this.form).then(res => {
					console.log(res);
					if (res.code === 0) {
						getApp().globalData.isReload = true;
						uni.redirectTo({
							url: '/pages/clone/success?type=0'
						})
					} else {
						this.$util.msg(res.msg);
					}
				}).catch(err => {
					this.$util.msg('请检查网络连接！');
				})
			},
			agree() {
				this.$refs.popup3.close();
			},
			to_mywork() {
				this.$refs.popup2.close();
				uni.switchTab({
					url: '/pages/work/work'
				})
			},
			openAI() {
				uni.navigateTo({
					url: '/pages/create/addAI?from=video'
				})
			},
			to_viocelist() {
				uni.navigateTo({
					url: '/pages/create/voiceList?digitalId=' + this.form.voiceId
				})
			},
			to_myMusic() {
				uni.navigateTo({
					url: '/pages/create/myMusic?musicMateId=' + this.form.musicMateId
				})
			},
			to_humanList() {
				uni.navigateTo({
					url: '/pages/create/humanList?digitalId=' + this.form.digitalId
				})
			},
			to_musicList() {
				uni.navigateTo({
					url: '/pages/create/musicList?musicMateId=' + this.form.musicMateId
				})
			},
			to_titleList() {
				if (this.form.digitalId <= 0) {
					return this.$util.msg('请先配置数字人模型！')
				}
				getApp().globalData.temp_titles = this.form.titles;
				getApp().globalData.temp_coverUrl = this.coverUrl;
				uni.navigateTo({
					url: '/style/titleStyle'
				})
			},
			to_textStyle() {
				if (this.form.digitalId <= 0) {
					return this.$util.msg('请先配置数字人模型！')
				}
				getApp().globalData.temp_coverUrl = this.coverUrl;
				uni.navigateTo({
					url: '/style/textStyle?style=' + JSON.stringify(this.form.captions)
				})
			},
			isMusicChange(e) {
				this.form.isMusic = e.detail.value
			},
			isCaptionsChange(e) {
				this.form.isCaptions = e.detail.value
			},
			isTitleChange(e) {
				this.form.isTitle = e.detail.value
			},
            isPipChange(e) {
                this.form.isPip = e.detail.value
            },
			closePop() {
				uni.navigateBack()
			},
			check() {
				let url = 'https://oop-zl-szr.oss-cn-hangzhou.aliyuncs.com/static/' + getApp().globalData.jiaochengUrl3 +
					'.mp4'
				if (this.config.isAudit) {
					this.$util.toWebView('https://szrjch5.zhim123.com/pages/learn/page4')
				} else {
					this.$util.toWebView(
						`https://szrjch5.zhim123.com/pages/video/index?url=${encodeURIComponent(url)}&title=教学视频`
					)
				}
			},
			musicVolumechange(value) {
				this.form.musicVolume = value;
			},
			voiceVolumechange(value) {
				this.form.voiceVolume = value;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		padding: 50rpx 30rpx 0;
		height: calc(100vh - 190rpx);
		overflow-y: scroll;
		padding-bottom: 20rpx;
	}

	.top-dro {
		border-radius: 20rpx;
		width: 690rpx;
		height: 90rpx;
		// background: url("") no-repeat;
		// background-size: 100% 100%;
		background-color: #000;
		margin: 0 auto 50rpx;
		padding: 0 30rpx;

		// box-shadow: 0rpx 26rpx 30rpx 0rpx rgba(55, 58, 167, 0.24);
		.btn {
			width: 140rpx;
			height: 46rpx;
			border-radius: 6rpx;
			border: 1rpx solid #ffffff;
			font-size: 22rpx;
			font-weight: 500;
			color: #ffffff;

			image {
				width: 8rpx;
				height: 16rpx;
				margin-left: 5rpx;
			}
		}
	}

	.box_title {
		width: 690rpx;
		margin: 50rpx auto 0;

		.sort {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 36rpx;
			height: 36rpx;
			text-align: center;
			background-color: #000000;
			border-radius: 5rpx;

			text {
				margin-top: 6rpx;
			}
		}

		image {
			width: 36rpx;
			height: 36rpx;
		}
	}

	.form_box {
		width: 690rpx;
		margin: 30rpx auto 0;
		padding-left: 30rpx;
		background-color: white;
		border-radius: 20rpx;

		.form_item {
			width: 660rpx;
			height: 100rpx;
			padding-right: 30rpx;
			position: relative;

			.form_item_left {
				text {
					width: 100%;
				}
			}

			.form_item_right {
				font-size: 28rpx;
				width: 100%;

				.right_icon {
					width: 10rpx;
					height: 20rpx;
				}

				.playbtn {
					padding: 12rpx 22rpx;
					font-size: 24rpx;
					color: #000000;
					border-radius: 10rpx;
					border: 1rpx solid #000000;
				}
			}

			.form_item_right ::v-deep {
				input {
					color: rgba(21, 21, 21, 1) !important;
					font-weight: 500;
				}

				uni-number-box {
					input {
						color: #e4265b !important;
						font-weight: 500;
					}
				}
			}
		}

		.form_item_line::after {
			content: "";
			width: 100%;
			height: 1px;
			background-color: #f4f4f4;
			position: absolute;
			top: 99.9%;
		}
	}

	.footer {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 190rpx;
		background: #ffffff;

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 690rpx;
			height: 110rpx;
			border-radius: 20rpx;
			font-size: 36rpx;
			color: #f9f9f9;
		}
	}

	.people-box::-webkit-scrollbar {
		height: 0;
	}

	.people-box {
		margin-top: 30rpx;
		width: 690rpx;
		height: 364rpx;
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;

		.people-item {
			display: inline-block;
			width: 260rpx !important;
			height: 364rpx;
			border-radius: 20rpx;
			overflow: hidden;
			background-color: #fff;
			margin-right: 30rpx;
			border: 5rpx solid #fff;
		}

		.act {
			border: 5rpx solid #eb5e00;
		}
	}

	.text-box::-webkit-scrollbar {
		height: 0;
	}

	.tip-box {
		width: 600rpx;
		background: #ffffff;
		border-radius: 18rpx;
		padding: 70rpx 60rpx 58rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -60%);

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 400rpx;
			height: 88rpx;
			border-radius: 44rpx;
		}

		.cancelbtn {
			background: #eeeeee;
			font-weight: 600;
			font-size: 28rpx;
			color: #000;
		}
	}

	.AI-btn {
		width: 170rpx;
		height: 63rpx;
		background: #eb5e00;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: #ffffff;
	}

	.AI-box {
		background: #edf0f4;
		border-radius: 20rpx 20rpx 0 0;

		.AI-top {
			height: 120rpx;
			padding: 0 30rpx;
			border-bottom: 1px solid #ddd;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #131415;
		}
	}

	.tab-box {
		width: 690rpx;
		height: 100rpx;
		margin-left: -30rpx;
		display: flex;
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;

		.choose-style {
			font-size: 30rpx;
			font-weight: 500;
			color: #1853c5;
		}

		.normal-style {
			font-size: 30rpx;
			font-weight: 500;
			color: #333;
		}

		.normal-box {
			width: 30rpx;
			height: 30rpx;
			background: #fff;
			border: 1rpx solid #b5b8cc;
			border-radius: 4rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 14rpx;
		}

		.choose-box {
			width: 30rpx;
			height: 30rpx;
			background: #1853c5;
			border: 1rpx solid #1853c5;
			border-radius: 4rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 14rpx;
		}

		.left-big {
			width: 50%;
			height: 100rpx;
			background-color: #e0e3f7;

			.left-mini {
				width: 100%;
				height: 100rpx;
				background-color: #fff;
				border-radius: 0 55rpx 0 0;
			}
		}

		.left-big2 {
			width: 50%;
			height: 100rpx;
			background-color: #fff;

			.left-mini2 {
				width: 100%;
				height: 100rpx;
				background-color: #e0e3f7;
				border-radius: 0 0 55rpx 0;
			}
		}

		.right-big {
			width: 50%;
			height: 100rpx;
			background-color: #fff;

			.right-mini {
				width: 100%;
				height: 100rpx;
				background-color: #e0e3f7;
				border-radius: 0 0 0 55rpx;
			}
		}

		.right-big2 {
			width: 50%;
			height: 100rpx;
			background-color: #e0e3f7;

			.right-mini2 {
				width: 100%;
				height: 100rpx;
				background-color: #fff;
				border-radius: 55rpx 0 0 0;
			}
		}
	}

	.scroll-box {
		height: 700rpx;
		overflow-y: scroll;
	}

	::-webkit-scrollbar {
		height: 0;
	}

	.underlined {
		text-decoration: underline;
	}

	.sure-btn {
		// background: linear-gradient(90deg, #5493DF 0%, #144FC3 100%);
		// box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(66, 106, 171, 0.29);
		background: #000;
		color: #fff;
	}

	.cancelBtn1 {
		background: #eeeeee;
		border: 1rpx solid #eee;
		font-weight: 600;
		font-size: 28rpx;
		color: #000;
	}

	.btn99 {
		width: 330rpx;
		height: 88rpx;
		margin: 0 auto;
		border-radius: 44rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.langBtn {
		width: 110rpx;
		height: 44rpx;
		border: 2rpx solid #eb5e00;
		color: #eb5e00;
		border-radius: 10rpx;
		text-align: center;
		font-size: 22rpx;
		line-height: 42rpx;
	}
</style>